<template>
  <div class="yingmoo-attention">
   <router-view></router-view>
    <ul class="nav">
      <li>关注的媒体</li>
      <!--<router-link tag="li" to="/ymAttentionstore">关注的店铺</router-link>
      <router-link tag="li" to="/ymAttentionactivity">关注的活动</router-link>-->
      <!--<div class="uploading">
        <input type="text" placeholder="请输入搜索的媒体" />
        <div class="btn_media1">搜索</div>
      </div>-->
    </ul>
    <div class="model">
      <div class="div">
        <dl v-for="attention in attentionList">
          <dt><img width="224px" height="146px" :src="attention.cover"/></dt>
          <dd class="headline">{{attention.mediaName}}</dd>
          <dd class="btn_media">
            <div @click="cancelAttention(attention.attentionId)"><img src="../assets/ym-member/media/attention.png" />取消关注</div>
            <div @click="addToCart(attention.mediaId,attention.mediaType)"><img src="../assets/ym-member/media/shopping-cart.png" />加入购物车</div>
          </dd>
        </dl>
      </div>
      
      <ul class="ul">
        <li>
          <input type="checkbox" id="ours" />
          <label for="ours">全选</label>
        </li>
        <li>
          <img src="../assets/ym-member/media/car.png" />加入购物车
        </li>
        <li>
          <img src="../assets/ym-member/media/attention.png" />取消关注
        </li>
        <li>
          <img src="../assets/ym-member/media/right.png" />完成
        </li>
        <li style="cursor: pointer;">批量操作</li>
      </ul>
    </div>
    <!--  分页器  -->
    <div class="paging">
      <el-pagination
        :page-size="10"
        background
        layout="prev, pager, next, jumper"
        :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "yingmoo-attention",
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
      	user:{},
      	attentionList:[],
        model: [{
          text: "媒体名称媒体名称媒体名称"
        }]
      }
    },
    mounted(){
    	this.getAttentions();
    },
    methods:{
    	getAttentions:function(){
    		this.user = JSON.parse(localStorage.getItem("user"));
    		this.$http.post(this.requestAddr+"/GetJson/getAttentionMedia",{"memberId":this.user.autoId,"type":1},{emulateJSON:true}).then(
    			(res)=>{
    				if(res.data.code == 500){
    					window.location.href="../#/ymMemberattentionmedia";
    					return;
    				}
    				this.attentionList = res.data.attentionList;
    				console.log(this.attentionList)
    			}
    		)
    	},
    	cancelAttention:function(id){
    		this.$confirm('确认要删除该关注吗？', '需求删除申请', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning' 
        }).then(
        	()=>{        		
        		this.$http.post(this.requestAddr+"/GetJson/cancelAttention",{"attentionId":id},{emulateJSON:true}).then(
        			(res)=>{
        				this.getAttentions();
        			}
        		)
        	}
        )
    	},
    	addToCart:function(id,type){
    		console.log(id)
    		console.log(type)
    		this.$http.post(this.requestAddr+"/GetJson/addToCart",{"advertiserId":this.user.autoId,"mediaId":id,"mediaType":type},{emulateJSON:true}).then(
    			(res)=>{
    				if(res.data.code==0){
    					alert(res.data.msg);
    				}
    			}
    		)
    	}
    }
  }

</script>

<style scoped lang="less">
  .yingmoo-attention {
    width: 100%;
    .nav {
      width: 1200px;
      height: 46px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      margin-top: 20px;
      li {
        list-style: none;
        width: 90px;
        height: 30px;
        margin: 0 20px;
        line-height: 30px;
        color: #666666;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          background-color: #036eb7;
          color: white;
        }
        &:nth-child(1){
          background-color: #036eb7;
          color: white;
        }
      }
      .uploading {
        display: flex;
        margin-left: 555px;
        input {
          width: 180px;
          height: 24px;
          border-right: none;
          border-left: 1px solid #999999;
          border-top: 1px solid #999999;
          border-bottom: 1px solid #999999;
          padding-left: 8px;
          font-size: 14px;
          outline: none;
        }
        .btn_media1 {
          width: 51px;
          height: 28px;
          font-size: 14px;
          line-height: 28px;
          color: white;
          background-color: #f29600;
          text-align: center;
          cursor: pointer;
        }
      }
    }
    .model {
      width: 1200px;
      height: 773px;
      background-color: white;
      margin: 0 auto;
      padding-top: 24px;
      .div{
        width: 1160px;
        margin: 0 auto;
        dl {
          width: 224px;
          height: 246px;
          margin-right: 10px;
          float: left;
          .headline {
            line-height: 40px;
            text-align: center;
            color: #333333;
            font-size: 16px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
          }
          .btn_media {
            display: flex;
            align-items: center;
            cursor: pointer;
            div {
              width: 100px;
              height: 40px;
              font-size: 14px;
              text-align: center;
              line-height: 40px;
              margin-left: 7px;
              &:nth-child(1) {
                background-color: #e6e6e6;
                color: #999999;
              }
              &:nth-child(2) {
                background-color: #f29600;
                color: white;
              }
              img {
                position: relative;
                top: 2px;
                right: 3px;
              }
            }
          }
          &:nth-child(5n){
            margin-right: 0;
          }
        }
      }
      .ul{
        clear: both;
        width: 1200px;
        height: 46px;
        background-color: #f2f2f2;
        li{
          float: left;
          line-height: 46px;
          color: #666666;
          margin-left: 25px;
          img{
            margin-right: 6px;
          }
          &:last-child{
            width: 130px;
            float: right;
            background-color: #f29600;
            text-align: center;
            color: white;
            font-weight: bold;
          }
        }
      }
    }
    .paging {
      width: 1200px;
      height: 35px;
      margin: 23px auto;
      text-align: center;
    }
  }

</style>
